<template>
  <div class="pageImg">
    <div class="navBar">
      <van-nav-bar title="我的测肤图像" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="bodyBox">
      <div class="head">
        <div class="someWords">
          <p>测肤图像记录已达3天，即可开启功能！</p>
        </div>
        <div class="imgBox">
          <img
            src="http://10.31.169.37:3000/images/mypage/1.png"
            alt=""
            class="img1"
          />
          <img
            src="http://10.31.169.37:3000/images/mypage/2.png"
            alt=""
            class="img2"
          />
        </div>
      </div>
      <div class="days">
        <div class="process">
          <div class="pro-li completed">
            <p class="time"><span>1天</span></p>
            <p class="gray">已完成</p>
          </div>
          <div class="pro-li">
            <p class="time"><span>2天</span></p>
            <p class="gray">今日未测肤</p>
          </div>
          <div class="pro-li">
            <p class="time"><span>3天</span></p>
          </div>
        </div>
        <div class="imgBar"></div>
        <div class="imgBar2"></div>
        <button>点此测肤</button>
      </div>
      <div class="manageImg">
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="aqua">
          <van-swipe-item
            ><img src="http://10.31.169.37:3000/images/mypage/img 2.png" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="http://10.31.169.37:3000/images/mypage/img 2.png" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="http://10.31.169.37:3000/images/mypage/img 2.png" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="http://10.31.169.37:3000/images/mypage/img 2.png" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar, Swipe, SwipeItem } from "vant";
Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  data() {
    return {
      active: 1,
    };
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar__left {
  i {
    color: #000;
    font-size: 20px;
  }
}
/deep/.van-nav-bar__title {
  color: #000;
}
.pageImg {
  height: 100%;
  width: 100%;
  text-align: center;
}
.van-nav-bar {
  background-color: lightblue !important;
  font-family: "幼圆";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15px;
  .someWords {
    p {
      color: rgb(28, 137, 139);
      width: 195px;
      text-align: left;
      font-size: 18px;
    }
  }
  .imgBox {
    background: url("http://10.31.169.37:3000/images/mypage/bg.png") no-repeat;
    background-size: cover;
    position: relative;
    width: 190px;
    height: 90px;
    img {
      position: absolute;
    }
    .img1 {
      left: 20px;
      top: 10px;
      z-index: 900;
      width: 80px;
    }
    .img2 {
      height: 50px;
      left: 70px;
    }
  }
}
.process {
  padding: 0 15px;
  display: flex;
  justify-content: space-around;
}
.pro-li {
  width: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.completed {
  .time {
    background-color: rgb(100, 200, 200);
    color: #fff;
    border: none;
  }
}
.time {
  width: 35px;
  height: 35px;
  border: 1px solid rgb(153, 153, 153);
  border-radius: 50%;
  position: relative;
  color: rgb(153, 153, 153);
  margin: 5px 0;
  span {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 0;
    top: 10px;
  }
}
.gray {
  color: rgb(153, 153, 153);
}
.imgBar,
.imgBar2 {
  width: 50px;
  height: 2px;
  position: absolute;
}
.imgBar {
  background-color: rgb(100, 200, 200);
  left: 95px;
  top: 30px;
}
.imgBar2 {
  background-color: rgb(153, 153, 153);
  left: 200px;
  top: 30px;
}
.days {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 15px;
  padding: 10px 0;
  font-size: 14px;
  button {
    background-color: rgb(108, 191, 206);
    color: #fff;
    width: 95px;
    height: 30px;
    border: transparent;
    border-radius: 20px;
    margin-top: 10px;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #fff;
  line-height: 80px;
}
/deep/.van-swipe__indicator {
  background-color: #000;
}
.manageImg {
  background-color: #fff;
  border-radius: 10px;
  margin: 20px 15px;
  font-size: 0;
  img {
    width: 100%;
  }
}
.bodyBox {
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
  overflow: auto;
  height: calc(100% - 46px);
  background: -webkit-linear-gradient(top, lightblue, white) !important;
}
</style>
